<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div th:replace="home/module/_header"></div>

<main id="tt-pageContent" data-page="1" data-type="new" class="tt-offset-small">
    <div class="container">
        <div class="tt-tab-wrapper">
            <div class="tt-wrapper-inner">
                <ul class="nav nav-tabs pt-tabs-default" role="tablist">
                    <li class="nav-item show">
                        <a class="nav-link active" data-toggle="tab" data-type="new" href="#"
                           role="tab"><span>最新文章</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" data-type="hot" href="#" role="tab"><span>热门文章</span></a>
                    </li>
                    <li class="nav-item tt-hide-md">
                        <a class="nav-link" data-toggle="tab" data-type="publish" href="#" role="tab"><span>我发布的</span></a>
                    </li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="tab-pane tt-indent-none show active" id="tt-tab-01" role="tabpanel">

                    <div class="tt-topic-list">
                        <div class="tt-list-header">
                            <div class="tt-col-topic">标题</div>
                            <div class="tt-col-category">板块</div>
                            <div class="tt-col-value hide-mobile">点赞数</div>
                            <div class="tt-col-value hide-mobile">回复数</div>
                            <div class="tt-col-value hide-mobile">点击数</div>
                            <div class="tt-col-value">发布</div>
                        </div>
                        <div id="tt-item-wrapper">
                            <div class="tt-item" th:each="post : ${posts.records}">
                                <div class="tt-col-avatar">
                                    <img th:src="${post.user.userAvatar}" class="avatar" alt="">
                                </div>
                                <div class="tt-col-description">
                                    <h6 class="tt-title">
                                        <a th:href="'/post/'+${post.id}">
                                            <span th:if="${post.isSticky == 1}" class="font-success">【置顶】</span>
                                            <span th:if="${post.isRecommend == 1}" class="font-warning">【推荐】</span>
                                        [[${post.postTitle}]]
                                    </a></h6>
                                    <div class="row align-items-center no-gutters">
                                        <div class="col-11">
                                            <ul class="tt-list-badge">
                                                <li th:each="tag : ${post.tagList}"><a th:href="'/tag/'+${tag.id}"><span
                                                        class="tt-badge">[[${tag.tagName}]]</span></a></li>
                                            </ul>
                                        </div>
                                        <div class="col-1 ml-auto show-mobile">
                                            <div class="tt-value">
                                                [[${post.postSummary}]]
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tt-col-category"><a th:href="'/category/'+${post?.category?.id}"><span
                                        th:class="'tt-color0'+${post?.category?.cateSort%9+1}+' tt-badge'">[[${post?.category?.cateName}]]</span></a>
                                </div>
                                <div class="tt-col-value  hide-mobile">[[${post.postLikes}]]</div>
                                <div class="tt-col-value tt-color-select  hide-mobile">[[${post.commentSize}]]</div>
                                <div class="tt-col-value  hide-mobile">[[${post.postViews}]]</div>
                                <div class="tt-col-value hide-mobile">[[${post.createTimeStr}]]</div>
                            </div>
                        </div>
                        <div id="no-data" class="tt-wrapper-inner" th:style="${posts.current >= posts.pages ? 'display:block;' :'display:none;'}">
                            <h4 class="tt-title-separator"><span>已经到了末尾了</span></h4>
                        </div>
                        <div class="tt-row-btn" id="load-more-div" th:if="${posts.current < posts.pages}">
                            <button type="button" class="btn-icon js-topiclist-showmore" id="load-more-btn"
                                    data-no="1">
                                <svg class="tt-icon">
                                    <use xlink:href="#icon-load_lore_icon"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<div th:replace="home/module/_footer"></div>
